<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用dl,dt,dd布局的演示</title>
<style type="text/css" media="all">

* {
  margin:0;
  padding:0;
}

input,select {
   font-family:Arial, Helvetica, sans-serif; 
   font-size: 12px;
}

.required {
  font:0.8em Verdana !important;
  color:#f68622;
}

.explain {
  color:#808080;
}

.b {
  font-weight:bold;
  font-size:12px;
}

.democss {
  font:11px/12px Arial, Helvetica, sans-serif;
  color:#333;
}

.democss dl {
  width:420px;
}

.democss dt {
  width: 110px;
  float: left;
  padding:4px;
  padding-top:8px; 
  text-align:right;
}

.democss dd{
  margin:0 0 0 118px;
  padding:4px;
  text-align:left;
}

.democss input {
  width:180px;
}

.democss select#content {
  width:185px;
}

.democss input.submit {
  width:70px;
}

div#submit {
  width:298px;
  text-align:left;
  padding:4px;
  padding-left:122px;
}

* html .democss input,* html .democss select{
  margin-left: -3px;  
}

* html div#submit input{
  margin-left: 0px;
}

</style>
</head>
<body>
<form id="demoform" class="democss" action="">
  <dl>
    <dt><span class="required">*</span>
      <label for="fname" accesskey="F">First name:</label>
    </dt>
    <dd>
      <input type="text" id="fname" value="" />
    </dd>
    <dt><span class="required">*</span>
      <label for="lname" accesskey="L">Last name:</label>
    </dt>
    <dd>
      <input type="text" id="lname" value="" />
    </dd>
    <dt><span class="required">*</span>
      <label for="content" accesskey="C">Preferred content:</label>
    </dt>
    <dd>
      <select name="content" id="content">
        <option value="us" selected="selected">Yahoo! U.S.</option>
        <option value="e1">Yahoo! U.S. in Spanish</option>
        <option value="b5">Yahoo! U.S. in Chinese</option>
        <option value="cn">Yahoo! China</option>
        <option value="uk">Yahoo! United Kingdom</option>
        <option value="ar">Yahoo! Argentina</option>
        <option value="aa">Yahoo! Asia</option>
        <option value="au">Yahoo! Australia</option>
        <option value="br">Yahoo! Brazil</option>
        <option value="ca">Yahoo! Canada in English</option>
        <option value="cf">Yahoo! Canada in French</option>
        <option value="fr">Yahoo! France</option>
        <option value="de">Yahoo! Germany</option>
        <option value="hk">Yahoo! Hong Kong</option>
        <option value="in">Yahoo! India</option>
        <option value="it">Yahoo! Italy</option>
        <option value="kr">Yahoo! Korea</option>
        <option value="mx">Yahoo! Mexico</option>
        <option value="sg">Yahoo! Singapore</option>
        <option value="es">Yahoo! Spain</option>
        <option value="tw">Yahoo! Taiwan</option>
      </select>
    </dd>
    <dt><span class="required">*</span>
      <label for="sex" accesskey="G">Gender:</label>
    </dt>
    <dd>
      <select name="sex" id="sex">
        <option value="">[Select] </option>
        <option value="m">Male</option>
        <option value="f">Female</option>
      </select>
    </dd>
    <dt><span class="required">*</span>
      <label for="yid" accesskey="Y">Yahoo! ID:</label>
    </dt>
    <dd>
      <input type="text" value="" id="yid">
      <span class="b">@yahoo.com</span><br />
      <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd>
    <dt><span class="required">*</span>
      <label for="pw" accesskey="P">Password:</label>
    </dt>
    <dd>
      <input type="password" value="" id="pw" />
      <br />
      <span class="explain">Six characters or more; capitalization matters!</span> </dd>
    <dt><span class="required">*</span>
      <label for="pw2" accesskey="R">Re-type password:</label>
    </dt>
    <dd>
      <input type="password" value="" id="pw2"/>
    </dd>
  </dl>
  <div id="submit">
    <input type="submit" value="Submit" class="submit"/>
    <input type="reset" value="Reset" class="submit"/>
  </div>
</form>
</body>
</html>
